<template>
	<u-overlay :show="show">
		<!-- 摇签动画 -->
		<view class="chouqian_box" v-if="showAnimation">
			<u--image
				class="cq"
				:src="imgUrl + 'imgs/worship/cq.gif'"
				mode="widthFix"
				lazy-load="true"
				width="300"
			></u--image>
		</view>

		<!-- 抽签 -->
		<view
			class="cq_content puff-in-center"
			:style="{
				width: clientWidth + 'px'
			}"
			v-if="showQian"
		>
			<view class="cq_title">
				<image
					:src="imgUrl + 'imgs/worship/huanyuan_left.png'"
					style="margin-right: 16rpx"
					mode=""
				></image>
				恭喜您获得
				<image
					:src="imgUrl + 'imgs/worship/huanyuan_right.png'"
					style="margin-left: 16rpx"
					mode=""
				></image>
			</view>
			<view class="cq_plate">
				<view class="cq_plate_content">
					第
					<text>{{ lotsIndex }}</text>
					号签
				</view>
				<image class="cq" :src="imgUrl + 'imgs/worship/cq.png'" mode="widthFix"></image>
				<image class="cq_bgc" :src="imgUrl + 'imgs/worship/cq_bgc.png'" mode=""></image>
			</view>
			<view
				v-if="ybCoinNumber >= coinNumber"
				class="cq_btn"
				style="width: 400rpx"
				@click.native.stop="jieqian"
			>
				{{ coinNumber }}福币解签
			</view>
			<view
				v-else
				class="cq_btn"
				style="width: 450rpx"
				@click="goUrl('/subPages/mine/cloudCoin/recharge')"
			>
				余额不足,去充值
			</view>
			<image
				class="cq_close"
				@click="close"
				:src="imgUrl + 'imgs/worship/close.png'"
				mode=""
			></image>
		</view>

		<!-- 解签成功 -->
		<view
			class="cq_success"
			:style="{
				width: clientWidth + 'px'
			}"
			v-if="showjq"
		>
			<view class="cq_success_content">
				<u--image
					class="cq_success_bgc"
					width="100%"
					height="100%"
					:src="imgUrl + 'imgs/worship/cq_success.png'"
					:fade="true"
					duration="450"
					mode="widthFix"
				></u--image>
				<view class="cq_success_title">第{{ jieqianData.lotsindex }}号签</view>
				<view class="cq_success_name">{{ jieqianData.title }}</view>
				<view class="cq_success_content_text">
					<view class="cq_title">{{ jieqianData.poem }}</view>
				</view>
				<view class="cq_success_content_content">
					{{ jieqianData.content }}
				</view>
			</view>
			<image
				class="cq_close"
				@click="closeDialog.show = true"
				:src="imgUrl + 'imgs/worship/close.png'"
				mode=""
			></image>
		</view>
	</u-overlay>

	<!-- 删除亲人确认框 -->
	<myModel
		v-model:show="closeDialog.show"
		title="关闭"
		content="关闭后无法再查看此解签，您确定要关闭吗"
		@confirm="close"
	></myModel>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watch } from 'vue';
import myModel from '/components/model/index.vue';
import { imgUrl } from '@/external/utils/imgUrl.js';
import WorshipApi from '@/API/worship';
import CommonApi from '../../../API/commenApi';

const worshipApi = new WorshipApi();
const commonApi = new CommonApi();

const navHeight = getApp().globalData.navHeight;
const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().screenWidth;

const props = defineProps({
	lotsType: String, //抽签类型，1：天后圣母(妈祖)   2：三山国王
	ybCoinNumber: Number //福币余额
});
const emits = defineEmits(['jieqian'])

const show = ref(false);
const showAnimation = ref(false); //抽签动画
const showQian = ref(false); //签子
const showjq = ref(false); //解签页面
const lotsIndex = ref(0); //签号
const actionId = ref(0); //签id

const closeDialog = reactive({
	show: false
});
let timer = ref(null);
const coinNumber = ref(0); //解签支付福币数量
const jieqianData = ref({}); //解签内容

watch(
	show,
	(newVal) => {
		if (newVal) {
			if (!timer.value) {
				showAnimation.value = true;
				timer.value = setTimeout(() => {
					showAnimation.value = false;
					timer.value = null;
					worshipApi.worshipchouQian({ lotsType: props.lotsType }).then((res) => {
						if (res.code === 0) {
							lotsIndex.value = res.data.lotsIndex;
							actionId.value = res.data.actionId;
							showQian.value = true;
						}
					});
					// 获取支付福币数量
					getIsPay();
				}, 3000);
			}
		}
	},
	{ immediate: true }
);

onLoad(() => {});

/**
 * 获取支付福币数量
 */
const getIsPay = async () => {
	let res = await commonApi.getConsumeList({ pos: 4 });
	if (res.code === 0) {
		coinNumber.value = res.data.items[0].number;
	}
};

/**
 * 解签
 */
const jieqian = async () => {
	let res = await worshipApi.jieQian({ actionId: actionId.value });
	if (res.code === 0) {
		showQian.value = false;
		showjq.value = true;
		jieqianData.value = res.data;
		emits('jieqian')
	}
};

/**
 * 关闭页面
 */
const close = () => {
	show.value = false;
	showQian.value = false;
	showjq.value = false;
	closeDialog.show = false;
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

defineExpose({
	show
});
</script>

<style lang="scss" scoped>
@import '/static/css/animation.css';
.chouqian_box {
	position: absolute;
	left: 50%;
	z-index: 99;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
}

.cq_content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.cq_title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #ffedc8;
		line-height: 32rpx;
		letter-spacing: 2px;
		text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		white-space: nowrap;

		image {
			width: 78rpx;
			height: 14rpx;
		}
	}

	.cq_plate {
		margin-top: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		height: 716rpx;

		.cq_plate_content {
			position: relative;
			width: 188rpx;
			height: 716rpx;
			writing-mode: vertical-lr;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 15rpx;
			font-weight: bold;
			font-size: 40rpx;
			line-height: 60rpx;
			color: #fb4a38;
			text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
			text-stroke: 0px #feefa0;
			z-index: 2;
			margin-right: 5rpx;

			text {
				writing-mode: horizontal-tb;
				display: block;
				margin: 5rpx 0 10rpx 10rpx;
				letter-spacing: 5rpx;
			}
		}

		.cq {
			width: 188rpx;
			position: absolute;
			left: 50%;
			top: 0;
			transform: translateX(-50%);
			z-index: 1;
		}

		.cq_bgc {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: -1;
		}
	}

	.cq_btn {
		width: 450rpx;
		height: 100rpx;
		margin-top: 80rpx;
		background: url('http://112.124.50.179:8888/imgs/worship/huanyuan_btn.png') no-repeat;
		background-size: 100% 100%;
		font-weight: bold;
		font-size: 32rpx;
		color: #524630;
		line-height: 100rpx;
		letter-spacing: 1px;
		text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		text-align: center;
	}

	.cq_close {
		margin-top: 72rpx;
		width: 48rpx;
		height: 48rpx;
	}
}

.cq_success {
	position: absolute;
	left: 50%;
	z-index: 99;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.cq_success_content {
		position: relative;
		width: 750rpx;
		height: 1016rpx;

		.cq_success_bgc {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 1016rpx;
		}

		.cq_success_title {
			position: absolute;
			left: 50%;
			top: 200rpx;
			transform: translateX(-50%);
			font-weight: 500;
			font-size: 28rpx;
			color: #fff9cc;
			line-height: 33rpx;
			letter-spacing: 3px;
		}

		.cq_success_name {
			position: absolute;
			left: 50%;
			top: 268rpx;
			transform: translateX(-50%);
			font-weight: 600;
			font-size: 48rpx;
			color: #fff9cc;
			line-height: 56rpx;
			letter-spacing: 6px;
			text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		}

		.cq_success_content_text {
			position: absolute;
			width: 530rpx;
			height: 178rpx;
			top: 376rpx;
			left: 50%;
			transform: translateX(-50%);
			box-sizing: border-box;
			background: rgba(243, 228, 181, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;

			.cq_title {
				width: 380rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #fff9cc;
				line-height: 48rpx;
				letter-spacing: 2px;
				text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.cq_success_content_content {
			position: absolute;
			width: 478rpx;
			height: 190rpx;
			top: 596rpx;
			left: 50%;
			transform: translateX(-50%);
			font-weight: 600;
			font-size: 26rpx;
			color: #fff9cc;
			line-height: 35rpx;
			letter-spacing: 1px;
			text-align: justified;
			font-style: normal;
			text-transform: none;
		}
	}

	.cq_close {
		position: relative;
		margin-top: 72rpx;
		width: 48rpx;
		height: 48rpx;
	}
}
</style>
